<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
    <title>天网定位</title>
    <style type="text/css">
        body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
        #l-map{height:100%;width:100%;}
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=z4s6YN0sdtl9oEnsTW72qyuInkL24Ya7"></script>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>

</head>

<div id="herder" style="width: 100%;height: 50px;font-size: 20px;background:#0080FF;color: white;text-align: center;padding-top: 15px;">
    天网定位
</div>
<div id="111" style="width: 100%;height: 50px;font-size: 20px;background:#0080FF;color: white;text-align: center;padding-top: 12px;">
    所在位置:
</div>

<div id="text" style="width: 100%;height: 50px;font-size: 20px;background:#0080FF;color: white;text-align: center;padding-top: 12px;">
</div>
<!--<iframe width="100%" height="100%" frameborder="0" scrolling="no" marginheight="600" marginwidth="300"-->
        <!--src="https://map.baidu.com/@13390080,3747570,17.08z"></iframe>-->
<div id="l-map"></div>
<div id="footer">
</div>
</html>
<script type="text/javascript">
    // 百度地图API功能
    var point = null;
    var map = new BMap.Map("l-map");
    map.centerAndZoom(new BMap.Point(116.395645,39.929986), 7);
    map.enableScrollWheelZoom(true);
    //获取浏览器定位
    var geolocation = new BMap.Geolocation();
    geolocation.getCurrentPosition(function(res){
        if(res){
            // alert(JSON.stringify(res.point));
            point = res.point;
            analysis(res.point);

            // map.centerAndZoom(new BMap.Point(res.point.lng,res.point.lat),12);
        }
    });
    //解析经纬度
    function analysis(pt){
        var geoc = new BMap.Geocoder();
        geoc.getLocation(new BMap.Point(pt.lng,pt.lat),function(res){
            alert(res.addressComponents.city.substring(0,2));
            map.centerAndZoom(res.address,12);
            geoc.getPoint(res.address, function(pt){
                $('#text').html(res.address);
                pt && addMarker(new BMap.Point(pt.lng, pt.lat),new BMap.Label( res.address , {offset:new BMap.Size(20,-10)}));
            }, "中国");
            map.addOverlay(new BMap.Marker(pt.lng,pt.lat),new BMap.Label(res.address, {offset:new BMap.Size(20,-10)}));
        });
    }
    function addMarker(point,label){// 编写自定义函数,创建标注
        var marker = new BMap.Marker(point);
        map.addOverlay(marker);
        marker.setLabel(label);
        // marker.setAnimation(BMAP_ANIMATION_BOUNCE);//图标动画
    }
</script>